<template>
  <div class="content-updatabaseinfo">
    <back-bar title="修改信息" @toBack="toBack" />
    <div class="newInfo-box">
      <van-field
        v-model="regsisterIfo.nickName"
        label="昵称"
        maxlength="8"
        placeholder="请输入昵称"
        clearable
        colon
        clickable
        autofocus
      />
      <van-field
        type="number"
        v-model="regsisterIfo.telPhone"
        label="手机号"
        placeholder="请输入手机号"
        clearable
        colon
        clickable
      />
      <van-field
        type="email"
        v-model="regsisterIfo.email"
        label="邮箱"
        placeholder="请输入邮箱"
        clearable
        colon
        clickable
      />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="regsisterIfo.gender" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
            <van-radio name="3">保密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        :value="regsisterIfo.birthday"
        label="出生日期"
        placeholder="点击选择时间"
        @click="showDataPopup = true"
        colon
      />
    </div>
    <button class="submit-btn" @click="submitUpdata">提交</button>
    <van-popup v-model="showDataPopup" position="bottom">
      <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfim"
        @cancel="showDataPopup = false"
      />
    </van-popup>
    <select-popup
      title="您确定修改吗"
      :showSelectPopup="showSelectPopup"
      @handleCancel="handleCancel"
      @handleAffirm="handleAffirm"
      @handleClickOverlay="handleClickOverlay"
    />
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import SelectPopup from "components/common/selectpopup/SelectPopup";

import { updataBaseInfo } from "network/user";

import { mapMutations } from "vuex";

export default {
  name: "updatabaseinfo",
  components: {
    BackBar,
    SelectPopup,
  },
  data() {
    return {
      regsisterIfo: {
        id: localStorage.getItem("userId"),
        nickName: localStorage.getItem("nickName"),
        telPhone: localStorage.getItem("telPhone"),
        email: localStorage.getItem("email"),
        gender: localStorage.getItem("gender"),
        birthday: localStorage.getItem("birthday"),
      },
      showIdType: false,
      checkPassword: "", //核对密码
      minDate: new Date(1960, 0, 1), //日期选择部分
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      showDataPopup: false, //日期弹出判断
      showSelectPopup: false,
    };
  },
  methods: {
    ...mapMutations({
      getNickName: "moduleUser/getNickName",
      getId: "moduleUser/getId",
      getHeader: "moduleUser/getHeader",
      getBirthday: "moduleUser/getBirthday",
      getEmail: "moduleUser/getEmail",
      getGender: "moduleUser/getGender",
      getTelPhone: "moduleUser/getTelPhone",
      getUserName: "moduleUser/getUserName",
    }),
    toBack() {
      this.$router.back();
    },
    //确认时间
    onConfim(time) {
      this.regsisterIfo.birthday = new Date(time).toLocaleDateString();
      this.showDataPopup = false;
    },
    submitUpdata() {
      let emailReg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      if (!this.regsisterIfo.telPhone.trim().length == 0) {
        if (!/^1[3456789]\d{9}$/.test(this.regsisterIfo.telPhone)) {
          this.$toast({
            message: "电话号码格式错误",
            position: "bottom",
          });
          return false;
        }
      }
      if (!this.regsisterIfo.email.trim().length == 0) {
        if (!emailReg.test(this.regsisterIfo.email)) {
          this.$toast({
            message: "邮箱格式错误",
            position: "bottom",
          });
          return false;
        }
      }
      this.showSelectPopup = true;
    },
    handleCancel() {
      this.showSelectPopup = false;
    },
    //点击提交修改
    handleAffirm() {
      this.showSelectPopup = false;
      updataBaseInfo(this.regsisterIfo).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.$toast({
            message: "修改成功",
            position: "bottom",
          });
          let {
            nickName,
            telPhone,
            email,
            birthday,
            gender,
          } = this.regsisterIfo;
          localStorage.setItem("telPhone", telPhone);
          localStorage.setItem("email", email);
          localStorage.setItem("birthday", birthday);
          localStorage.setItem("gender", gender);
          localStorage.setItem("nickName", nickName);
          //传入vuex中
          this.getNickName(nickName);
          this.getBirthday(birthday);
          this.getEmail(email);
          this.getGender(gender);
          this.getTelPhone(telPhone);
          this.$router.replace("/updatainfo");
        }
      });
    },
    handleClickOverlay() {
      this.showSelectPopup = !this.showSelectPopup;
    },
  },
};
</script>

<style scoped>
.content-updatabaseinfo {
  padding-top: 50px;
}
.newInfo-box {
  margin: 20px 15px;
}
.submit-btn {
  height: 35px;
  width: 250px;
  outline: none;
  background-color: #ff5654;
  border: none;
  color: #fff;
  margin-top: 10px;
  margin-left: 60px;
  border-radius: 5px;
}
</style>